<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
      <el-form-item :label="$t('status')">
        <el-select
          v-model="status"
          @change="pageGetCard"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="iccid">
        <el-input v-model="iccid" placeholder="iccid" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add">{{ $t('add') }}</el-button>
        <el-button type="primary" @click="pageGetCard">{{ $t('search') }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="cards"
      style="width: 100%"
    >
      <el-table-column
        prop="iccid"
        label="iccid"
      />
      <el-table-column
        prop="msisdn"
        label="msisdn"
      />
      <el-table-column
        prop="deviceCore"
        :label="$t('deviceCore')"
      />
      <el-table-column
        prop="status"
        :label="$t('status')"
        width="100"
        :formatter="formatPhoneStatus"
      />
      <el-table-column
        prop="createdDate"
        :label="$t('createdDate')"
        sortable
        width="220"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 13px">{{ formatDate(scope.row.createdDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="220"
        :label="$t('function')"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="showInfo(scope.row)"
          >{{ $t('edit') }}
          </el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 15px 0;text-align: right;">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>

    <el-dialog :title="$t('card')" :visible.sync="dialogPhoneFormVisible">
      <el-form
        label-width="180px"
      >

        <el-form-item :label="$t('msisdn')">
          <el-input :value="phoneForm.msisdn" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('iccid')">
          <el-input :value="phoneForm.iccid" :disabled="true" />
        </el-form-item>
        <el-form-item label="imsi">
          <el-input :value="phoneForm.imsi" :disabled="true" />
        </el-form-item>
        <el-form-item label="imei">
          <el-input :value="phoneForm.imei" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('total')+$t('flow')">
          <el-input :value="phoneForm.flowTotal" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('used')+$t('flow')">
          <el-input :value="phoneForm.flowUsed" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('surplus')+$t('flow')">
          <el-input :value="phoneForm.flowLeft" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('total')+$t('voice')+'(s)'">
          <el-input :value="phoneForm.voiceTotal" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('used')+$t('voice')+'(s)'">
          <el-input :value="phoneForm.voiceUsed" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('surplus')+$t('voice')+'(s)'">
          <el-input :value="phoneForm.voiceLeft" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('total')+$t('sms')">
          <el-input :value="phoneForm.smsTotal" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('used')+$t('sms')">
          <el-input :value="phoneForm.smsUsed" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('surplus')+$t('sms')">
          <el-input :value="phoneForm.smsLeft" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('activation')+$t('time')">
          <el-input :value="phoneForm.activationTime" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('overTime')">
          <el-input :value="formatDate(phoneForm.overTime)" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('status')">
          <el-input :value="formatPhoneStatus(phoneForm)" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('current')+$t('month')+$t('used')+$t('flow')">
          <el-input :value="phoneForm.flowCurrentMonthUsed" :disabled="true" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPhoneFormVisible = false">{{ $t('confirm') }}</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import {
  pageGetCard,
  deleteCard,
  insertCard,
  getCard
} from '@/api/iot/iotCardApi'
import {
  formatDate,
  formatPhoneStatus,
  successNotice,
  listPhoneStatus,
  cancelNotice
} from '@/util/common'
import { getPageSize, setPageSize } from '@/util/storage'

export default {
  name: 'Card',
  data() {
    return {
      cards: [],
      currentPage: 1,
      pagerCount: 4,
      total: 0,
      pageSize: getPageSize(),
      userId: null,
      dialogPhoneFormVisible: false,
      iccid: null,
      phoneForm: {},
      status: null,
      statusList: listPhoneStatus(this)
    }
  }, created() {
    this.pageGetCard()
  }, methods: {
    del(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.iccid, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteCard({
            iccid: item.iccid
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
              that.pageGetCard()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    add() {
      insertCard({
        iccid: this.iccid
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
        this.pageGetCard()
      })
    },
    showInfo(item) {
      getCard({
        iccid: item.iccid
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.phoneForm = data
          this.dialogPhoneFormVisible = true
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetCard()
    },
    handleCurrentChange(item) {
      this.currentPage = item
      this.pageGetCard()
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    formatPhoneStatus(item) {
      return formatPhoneStatus(this, item.status)
    },
    pageGetCard() {
      pageGetCard({
        status: this.status,
        iccid: this.iccid,
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          this.total = data.total
          this.cards = data.data
        }
      })
    }
  }
}
</script>


